<template>
	<picker class="py-1 px-2 box-b" mode='multiSelector'
		style="background: #F8F8F8;border-radius: 28rpx 28rpx 28rpx 28rpx;" @change="multiSelectorChange" :value="index"
		:range="rangeList" range-key="title" @columnchange="bindPickerChange">
		<view class="flex flex-row justify-between align-center">
			<u-icon name="map" color="#6E6E6E" size="11"></u-icon>
			<text class="ml-1 mr-6" style="color:#6E6E6E;font-size: 24rpx;">{{pickerName}}</text>
			<u-icon name="arrow-right" color="#6E6E6E" size="11"></u-icon>
		</view>
	</picker>
</template>

<script>
	export default {
		props: {
			page: {
				type: String,
				default: () => ''
			},
		},
		data() {
			return {
				index: [0, 0],
				rangeList: [
					[],
					[]
				],
				allcity: [],
				pickerName: ''
			}
		},
		created() {

			this.getData()
			console.log('页面区分', this.page)
		},
		methods: {
			bindPickerChange(e) {
				console.log(e)
				//根据第一列修改第二列
				if (e.detail.column === 0) {
					this.index = [e.detail.value, 0]
					this.rangeList[1] = this.allcity[e.detail.value].child.map(item => {
						return {
							id: item.id,
							title: item.name
						}
					})
				}
			},
			multiSelectorChange(e) {
				let value = this.allcity[e.detail.value[0]]
				let city = value.child[e.detail.value[1]]
				this.pickerName = city.name
				this.$emit('choiceCity', city)
			},
			async getData() {
				await this.$H.get('/index/get_citys', {}, {
					token: false
				}).then(res => {
					console.log('查询所有城市', res)
					this.allcity = res.data
					if (this.page == 'index' && uni.getStorageSync('city').name ) {
						this.pickerName = uni.getStorageSync('city').name
					} else {
						this.pickerName = res.data[0].child[0].name
					}

					const arr1 = res.data.map((item, index) => {
						return {
							id: item.id,
							title: item.title
						}
					})

					const arr2 = res.data[0].child.map((item, index) => {
						return {
							id: item.id,
							title: item.name
						}
					})
					this.rangeList = [arr1, arr2]
					console.log(this.rangeList)
				})
			}
		}
	}
</script>

<style lang="scss">
</style>